import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { addPerson } from '../../redux/actions/person'
import { connect } from 'react-redux'
class Person extends Component {
    handleAddPerson = () => {
        let name = this.nameNode.value
        let age = this.ageNode.value * 1
        let person = {
            id: nanoid(), name, age
        }
        this.props.addPerson(person)
        //点击提交后输入框清空
        this.nameNode.value = ''
        this.ageNode.value = ''
    }
    render() {
        return (
            <div>
                <h2>我是Person组件,上方组件求和为:{this.props.number}</h2>
                <input ref={c => this.nameNode = c} type="text" placeholder='输入您的姓名' />
                <input ref={c => this.ageNode = c} type="text" placeholder='输入您的年龄' />
                <button onClick={this.handleAddPerson}>添加</button>
                <ul>
                    {this.props.persons.map(data => {
                        return <li key={data.id}>{data.name}---{data.age}</li>
                    })}
                </ul>
            </div>
        )
    }
}
export default connect(
    state => ({ persons: state.persons, number: state.gentles }),   //映射状态的方法
    { addPerson}  //映射操作状态的方法
)(Person)
